/*
 * @Author: Xia_cc 978487464@qq.com
 * @Date: 2022-08-15 14:34:30
 * @LastEditors: Xia_cc 978487464@qq.com
 * @LastEditTime: 2022-08-17 10:28:57
 * @FilePath: \bpm-management-system\src\component\examinemanage\wofaqide\bianji\linshifukuanshenqinbianji.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Form, Input,Select,Table,Switch, Button ,Checkbox,Image} from 'antd';
import React from 'react';
import '../../examinemanage/bianji.less';

const LinShifukuanshenqinshenpiBianJiHTML=()=>(
    <Form name="global_state" className='CSGWDbianji'>
        {/* 第一个框 */}
        <Form.Item name="username" label="标题"
          rules={[
            {
              required: true,
              message: 'Username is required!',
            },
          ]}
        >
          <Input />
        </Form.Item>
        {/* 第二个框 */}
        <Form.Item
            name="gender"
            label="关联项目" disabled="true">
            <Select allowClear></Select>
        </Form.Item>
         {/* 第三个框 */}
        <Form.Item
            name="gender"
            label="拟付款金额"
            rules={[{ required: true, }]}>
            <Select allowClear></Select>
        </Form.Item>
        {/* 第四个框 */}
        <Form.Item
            name="gender"
            label="付款金额"
            rules={[{ required: true, }]}>
            <Select allowClear></Select>
        </Form.Item>
        {/* 表格 */}
        <Form.Item
            name="gender"
            label="收款账户"
            rules={[{ required: true, }]}>
            <Table
              columns={LinShiFukuanTable}
              dataSource={LinShiFukuanArr}
              // scroll={{ x: 1300}}
              pagination={false}
              className="LilTable"
            />
        </Form.Item>
        {/* 多行文本框 */}
        <Form.Item
            name="gender"
            label="付款备注"
            rules={[{ required: true, }]}>
            <Input.TextArea rows={(6)} />
        </Form.Item>
        {/* 开关 */}
          <Form.Item
             name="gender"
             label="是否紧急"
             rules={[{ required: true, }]}>
             <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
         </Form.Item>
          {/* 上传审批单 */}
          <Form.Item
             name="gender"
             label="项目审批单"
             rules={[{ required: true, }]}>
             <Button type='primary'>+ 点击上传</Button>
             <p className='fontP'>文件格式为Word、Excel、PDF、JPG、PNG、ZIP等大小不超过10M</p>
         </Form.Item>
         {/* 产值确认单 */}
         <Form.Item
             name="gender"
             label="产值确认单"
             rules={[{ required: true, }]}>
             <Button type='primary'>+ 点击上传</Button>
             <p className='fontP'>文件格式为Word、Excel、PDF、JPG、PNG、ZIP等大小不超过10M</p>
         </Form.Item>
         {/* 审批人 */}
         <Form.Item
             name="gender"
             label="产值确认单"
             rules={[{ required: true, }]}>
             <Image src="@/assets/images/headerimg.png" className='spanDiv'/>
             <span>&gt;</span> 
             <Image className='spanDiv'/> &nbsp; 
             <Image className='spanDiv'> + </Image>
         </Form.Item>
          {/* 抄送人 */}
          <Form.Item
             name="gender"
             label="抄送人"
             rules={[{ required: true, }]}>
             <span className='spanDiv'> + </span>
         </Form.Item>
         <div className='lastForm'>
             <Button type='primary' className='footBut' centered>保存为草稿</Button>
             <Button type='primary' className='footBut' centered>提交审核</Button>
             <Button type='primary' className='footBut' centered>取消</Button>
         </div>
    </Form>
)

  const LinShiFukuanTable = [
    {
      title: '序号',
      width: 100,
      dataIndex: 'name',
      key: 'name',
      fixed: 'left',
    },
    {
      title: '户名',
      width: 100,
      dataIndex: 'age',
      key: 'age',
      fixed: 'left',
    },
    {
      title: '开户行',
      dataIndex: 'address',
      key: '1',
    },
    {
      title: '账户',
      dataIndex: 'address',
      key: '2',
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 100,
      render: () => <Checkbox onChange={onChange}></Checkbox>
    },
  ];
  const LinShiFukuanArr = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York Park',
    },{
      key: '2',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
    },{
      key: '3',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
    },
  ];
  const onChange = (e) => {
    console.log(`checked = ${e.target.checked}`);
  };
const BanzufukuanBianJi=()=>{
    return(
        <>
            <LinShifukuanshenqinshenpiBianJiHTML/>
        </>
    )
}
export default BanzufukuanBianJi;